<script src="vue.js"></script>

<div id="app">
     <!--父组件的使用-->
     <my-parent></my-parent>
</div>

<!--定义子组件-->
<template id="child">
    <div>
        <ul>
            <li>手机品牌：{{show.pinpai}}</li>
            <li>手机型号：{{show.type}}</li>
            <li>市场价格：{{show.price}}</li>
        </ul>
    </div>
</template>

<!--定义父组件-->
<template id="parent">
    <div>
        <h3>手机搜索</h3>
        <label>手机品牌：</label><input type="text" v-model="pinpai" />
        <my-child v-bind:name="pinpai"></my-child>
    </div>
</template>


<script>
    //对父组件进行注册
    Vue.component('my-parent',{
        template:"#parent", //绑定模板
        data(){
            return{
                pinpai: "" //设置父组件的变量
            }
        }
    })

//对子组件的进行注册
Vue.component("my-child",{
    template: "#child",
    data(){
        return{
            //设置要查询的数据集合
            content: [
                {"pinpai":"苹果","type":"iPhone7","price":123},
                {"pinpai":"华为","type":"电脑","price":4123},
                {"pinpai":"腾讯","type":"软件","price":2123},
                {"pinpai":"百度","type":"接口","price":1123},
            ],
            //设置数据要绑定的对象
            show: {"pinpai":"","type":"","price":''}
        }
    },
    props:["name"], //设置父组件与子组件相互传值的属性设置
    watch:{
        //通过获取父组件传达的数值进行查找
        name(){
            //判断数值是否为空
            if (this.$props.name){
                //设置返回值
                var found=false
                //查找与数值相同的值
                this.content.forEach((v,i) => {
                    if(v.pinpai===this.$props.name){
                        //获取相同数值的集合
                        found = v
                    }
                });
                //讲查询到的值赋值到对象当中
                this.show = found ? found: {"pinpai": "","type":"","price":''}
            }else{
                return
            }
        }
    }
})

var vu=new Vue({
    el:'#app',
})
</script>

<style>

</style>